<template>
	<basic-container>
		<avue-crud :option="option" :data="data" ref="crud" @expand-change="expandChanges" :table-loading="loading"
		:permission="permissionList" :page="page" @refresh-change="refreshChange" @search-change="searchChange"
		@search-reset="searchReset" @current-change="currentChange" @size-change="sizeChange" @on-load="onLoad">
			<template slot="expand" slot-scope="{row}">
				<avue-crud ref="crud" :option="option1"  v-if="row.orderFormGoodsResultList.length>0"  :data="row.orderFormGoodsResultList"
				:row-style="rowStyle">
					<template slot-scope="{row}" slot="goodsMainPhotoUrl">
						<img :src="row.goodsMainPhotoUrl" style="width:50px;height:50px;" />
					</template>
					<template slot-scope="{row}" slot="goodsName">
						<div>{{row.goodsName}} <span style="color: red;" v-if="row.acType==8">[赠品]</span></div>
					</template>
				</avue-crud>
				<div v-else class="loading_icon">
					<i class="el-icon-loading"></i>
				</div>
			</template>
			<template slot-scope="scope" slot="menu">
				<!--<el-button type="text" v-if="scope.row.status==0" size="small" @click="shipGoods(scope.row.id,scope.row.distributionSn)">发货</el-button>
				<el-button type="text" v-if="scope.row.status==1" size="small" @click="editLogistics(scope.row)">修改物流</el-button>-->
				<el-button type="text" size="small" v-if="!scope.row.deliveryUserId" @click="toExamine(scope.row.id,scope.row.supplierId)">审核</el-button>
			</template>
			<!-- 自定义添加搜索条件  按日期搜索  -->
			<template slot="search">
				<el-col :md="12" :xs="24" style="float: left;width: 50%;">
					<el-form-item label="下单时间" style="width: 50%;display: inline-block;">
						<el-date-picker size="mini" placeholder="开始时间" @change="getTime(0)" value-format="yyyy-MM-dd" v-model="beginTime" type="date">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="至" label-width="40px" style="width: 50%;display: inline-block;">
						<el-date-picker size="mini" placeholder="结束日期" @change="getTime(1)" value-format="yyyy-MM-dd" v-model="endTime" type="date">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</template>
		</avue-crud>
		<el-dialog title="审核配货单" :visible.sync="examineDialogVisible" width="40%">
			<el-row type="flex" class="row-bg" style="margin-bottom: 30px;">
				<el-col :span="6">
					<el-input v-model="searchInput" placeholder="请输入手机号"  ></el-input>
				</el-col>
				<el-col :span="12" style="margin-left: 20px;">
					<el-button type="primary" icon="el-icon-search" @click="selectUser()">搜索</el-button>
				</el-col>
			</el-row>
			<el-table
					ref="examineTable"
					:data="examineTableData"
					highlight-current-row
					@current-change="handleCurrentChange"
					style="width: 100%">
				<el-table-column label="单选" width="65">
					<template scope="scope">
						<el-radio :label="scope.row.userId" v-model="templateRadio" @change.native="getTemplateRow(scope.$index,scope.row)">&nbsp</el-radio>
					</template>
				</el-table-column>
				<el-table-column
						property="account"
						label="账号"
						width="120">
				</el-table-column>
				<el-table-column
						property="phone"
						label="手机号"
						width="120">
				</el-table-column>
				<el-table-column
						property="name"
						label="姓名">
				</el-table-column>
				<el-table-column
						property="roleType"
						label="类型">
				</el-table-column>
			</el-table>
			<div style="margin-top: 20px">
				<el-button type="primary" style="display: block;margin: auto" @click="setCurrent()">确认</el-button>
			</div>
		</el-dialog>
	</basic-container>
</template>

<script>
	import {
		examine,
		getList,
		examineUserList,
		getOrderFormGoods
	} from "@/api/base/transaction/orderDistribution";
	import {
		mapGetters
	} from "vuex";
	import {
		testCode
	} from '@/util/util';
	var Dict = JSON.parse(localStorage.getItem("mall-dictionary")).content;
	export default {
		data() {
			return {
				templateRadio:'',
				examineDialogVisible: false,
				examineTableData:[],
				disId: "",
				searchInput:"",
				supplierId:"",
				deliverId: "",
				form1: {},
				formSend: {},
				obj: {},
				query: {},
				beginTime: '',
				endTime: '',
				loading: true,
				rolesTree: [],
				rolesKeys: [],
				box: false,
				isLoad:false,
				dialogDeatilVisible: false,
				sendDialogVisible: false,
				page: {
					pageSize: 10,
					currentPage: 1,
					total: 1,
					pageSizes: [10, 20, 30, 40], //默认
				},
				data: [],
				optionSend: {
					emptyBtn: false,
					submitBtn: false,
					column: [{
							label: "配货单号",
							prop: "distributionSn",
							span: 24,
							readonly: true,
							row: true,
						},
						{
							label: "物流公司",
							prop: "ecId",
							type: 'select',
							span: 24,
							row: true,
							dicUrl: "base/expressCompany/listAll",
							props: {
								label: "lable",
								value: "value"
							},
							rules: [{
								required: true,
								message: "请输入物流公司",
								trigger: "blur"
							}]
						},
						{
							label: "物流单号",
							prop: "shipCode",
							span: 24,
							row: true,
							rules: [{
								required: true,
								message: "请输入非汉字的物流单号",
								trigger: "blur",
								validator: testCode}]
						},
						{
							label: "操作说明",
							prop: "distributionDesc",
							type: 'textarea',
							span: 24,
							row: true,
						}
					]
				},
				//配货单详情
				optionDetail: {
					submitBtn: false,
					emptyBtn: false,
					group: [{
						prop: 'group1',
						display:true,
						column: [{
							label: '订单编号',
							prop: 'orderId',
							readonly: true,
						}, {
							label: '下单时间',
							prop: 'oPayTime',
							readonly: true,
						}, {
							label: '支付方式',
							prop: 'payWay',
							type: 'select',
							dicData: Dict.payWayEnum,
							disabled: true,
						}]
					}, 
					{
						prop: 'group3',
						column: [{
							label: '配货单号',
							prop: 'distributionSn',
							readonly: true,
						}, {
							label: '生成时间',
							prop: 'addTime',
							readonly: true,
						}, {
							label: '配货单状态',
							row: true,
							prop: 'status',
							disabled: true,
							type: 'select',
							dicData: Dict.orderDistributionStatusEnum,
						}, {
							label: '宝贝详情',
							row: true,
							span: 24,
							prop: 'goodsDetails',
							formslot: true,
						}]
					}, { //收货地址
						prop: 'group4',
						column: [{
							label: '收货人',
							prop: 'trueName',
							readonly: true,
						},{
							label: '电话号码',
							prop: 'mobile',
							readonly: true,
						}, {
							label: '发票类型',
							display:true,
							prop: 'invoiceType',
							formslot: true,
						},{
							label: '发票抬头',
							prop: 'invoiceTitle',
							display:true,
							formslot: true,
						}, {
							label: '纳税人识别号',
							prop: 'invoiceNum',
							labelWidth:120,
							display:true,
							formslot: true,
						},
						{
							label: '收货地址',
							prop: 'address',
							readonly: true,
						}, {
							label: '详细地址',
							prop: 'areaInfo',
							readonly: true,
							span: 24,
						},  {
							label: '买家留言',
							prop: 'buyerMsg',
							readonly: true,
							span: 24,
						}, ]
					}, {
						prop: 'group5',
						display: false,
						column: [{
							label: '配货单号',
							prop: 'distributionSn',
							readonly: true,
						}, {
							label: '自提时间',
							prop: 'storeWillCallTime',
							readonly: true,
						}, {
							label: '门店信息',
							prop: 'storeWillInfo',
							readonly: true,
						}, {
							label: '操作说明',
							prop: 'text3',
							readonly: true,
						}]
					}]
				},
				//宝贝详情
				option1: {
					border: true,
					header: false,
					menu: false,
					size: 'mini',
					align: 'center',
					menuAlign: 'center',
					column:[{
						label: '宝贝图片',
						prop: 'goodsMainPhotoUrl',
						width: 150,
						slot: true,
					}, {
						label: '宝贝简介',
						align: 'left',
						slot: true,
						prop: 'goodsName'
					}, {
						label: '规格',
						width:150,
						prop: 'specInfo',
					}, {
						label: '单价',
						width: 100,
						prop: 'price'
					}, {
						label: '数量',
						width: 100,
						prop: 'count'
					}]
				},
				option: {
					addBtn: false,
					editBtn: false,
					delBtn: false,
					viewBtn: false,
					size: 'mini',
					expand: true,
					expandRowKeys: [],
					align: 'center',
					menuAlign: 'center',
					border: true,
					rowKey: 'distributionSn',
					defaultExpandAll: false,
					height: 'auto',
					// // calcHeight: 380,
					menuWidth: 180,
					search: true,
					searchMenuSpan:6,
					column: [{
							label: "配货单号",
							prop: "distributionSn",
							search: true,
						},
						{
							label: "供货商id",
							prop: "supplierId",
							hide: true,
							search: true,
						},
						{
							label: "id",
							prop: "id",
							hide: true,
							search: true,
						},
						{
							label: "订单号",
							prop: "orderId",
							search: true,
						},
						{
							label: "下单日期",
							prop: "addTime",
						}, {
							label: "实付款(￥)",
							prop: "totalPrice",
							width:100,
						},{
							label: "配货单类型",
							searchLabelWidth: 120,
							prop: "orderType",
							width:100,
							dicData: Dict.orderTypeEnum,
							//search:true,
							type: 'select',
						},
						{
							label: "配货单状态",
							searchLabelWidth: 120,
							searchSpan: 6,
							width:120,
							prop: "status",
							type: 'select',
							search: true,
							disabled: true,
							dicData: Dict.orderDistributionStatusEnum,
						}
					]
				},
			};
		},
		watch: {
			'form1.invoiceType'() {//发票类型
				if(this.form1.orderType==1){//普通订单 展示发票
					if (this.form1.invoiceType == 0) { //个人发票
						this.optionDetail.group[2].column[2].display = true
						this.optionDetail.group[2].column[3].display = true
						this.optionDetail.group[2].column[4].display = false
					}else if (this.form1.invoiceType == 2) {//不开发票
						this.optionDetail.group[2].column[2].display = true
						this.optionDetail.group[2].column[3].display = false
						this.optionDetail.group[2].column[4].display = false
					}else if (this.form1.invoiceType == 1){//单位发票
						this.optionDetail.group[2].column[2].display = true
						this.optionDetail.group[2].column[3].display = true
						this.optionDetail.group[2].column[4].display = true
					}
				}else{//积分订单 不展示 发票相关
					this.optionDetail.group[2].column[2].display = false
					this.optionDetail.group[2].column[3].display = false
					this.optionDetail.group[2].column[4].display = false
				}
				
			},
		},
		computed: {
			...mapGetters(["permission", 'userInfo']),
			permissionList() {
				return {

				};
			},
		},
		created() {
			let orderStatusEnum=[];//订单枚举
			//判断当前用户是否包含积分卖家角色
			if(this.userInfo.roleIds.indexOf(6)!=-1){
				let statusEnum=Dict.orderDistributionStatusEnum;
				for(let i=0;i<statusEnum.length;i++){
					if(statusEnum[i].label!="已退款" && statusEnum[i].label!="退款审核"){
						orderStatusEnum.push(statusEnum[i])
					}
				}
				this.option.column[5].dicData=orderStatusEnum;
				this.option.column[3].label="实付积分";

			}else{
				this.option.column[5].dicData=Dict.orderDistributionStatusEnum;
			}
		},
		methods: {
			getTemplateRow(index,row){                                 //获取选中数据
				this.templateSelection = row;
				console.log(this.templateSelection)
				// this.examineTableData.forEach((row, index) => {
				// 	row.enableFlag = this.templateSelection.flagIndex
				// })
				// row.enableFlag = 1
				// this.$HttpAddObj(row, ``).then(res => {})

			},
			setCurrent(){
				console.log(this.deliverId);
				console.log(this.disId);
				if(this.deliverId && this.disId){
					let obj={
						deliveryUserId:this.deliverId,
						id: this.disId
					}
					examine(obj).then((res) => {
						if (res.data.code == 200) {
							this.$message({
								type: "success",
								message: "审核成功"
							});
							this.examineDialogVisible = false;
						}else{
							this.$message({
								type: "error",
								message: res.data.message
							});
						}
					})
				}
			},
			getTime(type) {
				if(this.beginTime&&type==1){//先输入开始时间 后输入结束时间
					if (this.beginTime > this.endTime) {
						this.$message({
							type: "error",
							message: "结束时间不能小于开始时间"
						});
						this.endTime = ''
					}
				}else if(this.endTime&&type==0){//先输入结束时间 后输入开始时间
					if (this.beginTime > this.endTime) {
						this.$message({
							type: "error",
							message: "开始时间不能大于结束时间"
						});
						this.beginTime = ''
					}
				}
			},
			closeDetailDialog() {
				this.dialogDeatilVisible = false
			},
			emptytChange() {
				this.formSend = {}
			},
			//审核
			toExamine(id,supplierId){
				console.log(id)
				this.examineDialogVisible = true;
				this.disId = id;
				this.supplierId = supplierId;
				examineUserList(supplierId).then((res) => {
					if (res.data.code == 200) {
						this.examineTableData = res.data.data.splice(0, 10);
						if(this.examineTableData.length>1){
							this.templateRadio=this.examineTableData[0].userId
							this.deliverId=this.examineTableData[0].userId
						}
					}
				})
			},
			handleCurrentChange(val) {
				this.deliverId = val.userId;
			},
			rowStyle() {
				return {
					backgroundColor: '#f3f3f3',
					color: '#333333'
				}
			},
			expandChanges(row, expendList) {
				if(row.orderFormGoodsResultList){
					return;
				}
				let obj ={
					distributionId:row.id
				}
				getOrderFormGoods(obj).then((res) => {
					row.orderFormGoodsResultList = res.data.data;
				});
				console.log(row)
				console.log(expendList)
			},
			searchReset() {
				this.query = {};
				this.beginTime = '';
				this.endTime = '';
				this.onLoad(this.page);
			},
			searchChange(params,done) {
				this.page.currentPage = 1
				params.beginTime = this.beginTime
				params.endTime = this.endTime
				this.query = params;
				this.onLoad(this.page, params,done);
			},
			currentChange(currentPage) {
				this.page.currentPage = currentPage;
			},
			sizeChange(pageSize) {
				this.page.pageSize = pageSize;
			},
			refreshChange() {
				this.onLoad(this.page);
			},
			onload(val) {
				console.log(val)
			},
			//根据手机号搜索
			selectUser(){
				//this.queryT.phone = this.searchInput;
				//this.onLoadT(this.pageT);
				//console.log(id)
				this.examineDialogVisible = true;
				//this.disId = id;

				examineUserList(this.supplierId,this.searchInput).then((res) => {
					if (res.data.code == 200) {
						this.examineTableData = res.data.data.splice(0, 10);
						if(this.examineTableData.length>1){
							this.templateRadio=this.examineTableData[0].userId
							this.deliverId=this.examineTableData[0].userId
						}
					}
				})
			},
			onLoad(page, params = {},done) {
				this.loading = true;
				getList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
					if(done){
						done();
					}
					this.loading = false;
					const data = res.data;
					this.page.total = data.count;
					this.data = data.data;
					console.log(this.data);
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.el-col {
		float: none;
		display: inline-block;
		width: auto;
	}
	.loading_icon {
		width:30px;
		margin:auto;
	}
</style>
